<template>
  <div id="app">
    <keep-alive :include="include">
      <router-view  v-if="isRouterAlive" @set="get"/>
    </keep-alive>
<!--    <div class="fixed" v-if="reveal">-->
<!--      <router-link to="/bookrack" tag="div" :class="icon===0 ? 'icon' : '' " @click="pitch_on(0)">-->
<!--        <i class="iconfont icon-shujiguanli"></i>-->
<!--        <div>书架</div>-->
<!--      </router-link>-->
<!--      <router-link to="/index" tag="div" :class="icon===1 ? 'icon' : '' " @click="pitch_on(1)">-->
<!--        <i class="iconfont icon-home"></i>-->
<!--        <div>首页</div>-->
<!--      </router-link>-->
<!--      <router-link to="/chongzhi" tag="div" :class="icon===2 ? 'icon' : '' "  @click="pitch_on(2)">-->
<!--        <i class="iconfont icon-chongzhi"></i>-->
<!--        <div>充值</div>-->
<!--      </router-link>-->
<!--      <router-link to="/my" tag="div" :class="icon===3 ? 'icon' : '' " @click="pitch_on(3)">-->
<!--        <i class="iconfont icon-yonghu"></i>-->
<!--        <div>我的</div>-->
<!--      </router-link>-->
<!--    </div>-->
  </div>
</template>

<script>
    export default {
        provide(){
          return{
            reload:this.reload
          }
        },
        data(){
          return{
              icon:1,
              reveal:true,
              isRouterAlive:true,
              include:['index'],
          }
        },
        methods:{
            get:function(msg){
                let self=this
                if(msg=='hide'){
                    self.reveal=false
                }else{
                    self.icon=msg
                    self.reveal=true
                }
            },
            pitch_on:function(icon){
                this.icon=icon
            },
            reload(){
              this.isRouterAlive = false
              this.$nextTick(function(){
                  this.isRouterAlive = true
              })
            },
        }
    }
</script>

<style lang="scss">
  @import "assets/css/novel.scss";
  #app{
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  html,body{
    font-size: 16px;
    margin: 0px;
    background: white;
  }
  a:hover,a:active,a:visited,a:link,a:focus{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    outline:none;
    background: none;
    text-decoration: none;
  }
  .fixed{
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 1000;
    height: 50px;
    border-top: 1px solid #ddd;
    background: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 12px;
    color: gray;
  }
  .container{
    margin-bottom: 60px;
  }
  .fixed>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .iconfont{
    font-size: 1.2rem !important;
    color: gray;
  }
  .icon {
    i {
      color: $novel-bottom;
    }
    div {
      color: $novel-bottom;
    }
  }
  @media (min-width: 768px) {
      .container,.top{
        margin: auto;
        width: 750px;
      }
    }
</style>
